<template>
    <div>
        <div>{{ state.value }}</div>
    </div>
</template>

<script lang="ts" setup>
    import {reactive, onMounted, defineProps} from "vue";

    const props = defineProps({
        modelValue: {
            type: String,
            default: "",
        },
        level: Number
    });

    const state = reactive({
        level: Number,
        value: "",
        spaces: "",
    });
    const addSpace = (level: Number) => {
        for (let i = 0; i < level - 1; i++) {
            state.spaces += "　"
        }
        state.value = state.spaces + props.modelValue;
    }
    const init = (): void => {
        state.level = props.level;
        if (props.level == undefined || props.level == null) {
            state.level = 1
        }
        addSpace(state.level);
    };

    onMounted(() => {
        init();
    });
</script>
